<script setup lang="ts">
import { getKnowledgePageAPI } from '@/services/consult'
import type { Knowledge, KnowledgeParams, KnowledgeType } from '@/types/consult'
import { ref } from 'vue'
import KnowledgeCard from './KnowledgeCard.vue'

const props = defineProps<{ type: KnowledgeType }>()

const list = ref<Knowledge[]>([])
const loading = ref(false)

const params = ref<KnowledgeParams>({
  current: 1,
  pageSize: 10,
  type: props.type
})

const total = ref(9999999)

const onLoad = async () => {
  const res = await getKnowledgePageAPI(params.value)
  params.value.current++
  loading.value = false
  list.value.push(...res.data.rows)
  total.value = res.data.total
}
</script>

<template>
  <div class="knowledge-list">
    <van-list
      @load="onLoad"
      v-model:loading="loading"
      :finished="list.length >= total"
      finished-text="没有更多数据了"
    >
      <knowledge-card v-for="item in list" :item="item" :key="item.id" />
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.knowledge-list {
  padding: 0 15px;
}
</style>
